<template>
    <div class="login-div">
        <div class="login-bg">
            <div class="login-hz">
                <!-- 左边图片 -->
                <div class="bgimg">
                    <img src="../views/depot/center.png">
                </div>
                <!-- 右边盒子 -->
                <div class="login-box">
                    <h1 class="login-title">ERP系统</h1>

                    <el-form :model="formData" ref="form" :rules="rules">
                        <el-form-item prop="uname">
                            <el-input v-model="formData.uname" placeholder="请输入用户名" style="height: 38px;"
                                :prefix-icon="User" :validate-event="false"></el-input>
                        </el-form-item>
                        <el-form-item prop="upass">
                            <el-input type="password" v-model="formData.upass" placeholder="请输入密码" style="height: 38px;"
                                :prefix-icon="Lock" show-password :validate-event="false"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" link @click="toRegister">
                                注册租户
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="btn" type="primary" @click="onSubmit(form)">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import useSys from '@/store/useSys'
let router = useRouter();
let sys = useSys();
//表单里面的数据模型
let formData = ref({})
//表单引用，用于调用表单对象的
let form = ref(null)

//验证表单里面的规则
let rules = {
    uname: [
        { required: true, message: "用户名不能为空" },
        { pattern: /^[a-zA-Z]{5,}$/, message: "账户必须是字母， 且5位或者以上。" }
    ],
    upass: [
        { required: true, message: "密码不能为空" }
    ]
}
let onSubmit = (formEl) => {
    formEl.validate(v => {
        if (v) {
            sys.login(formData.value.uname, formData.value.upass).then(resp => {
                if (resp) {
                    console.log("跳转到首页")
                    router.push("/")
                }
            })
        }
    });
}

const toRegister = () => {
    router.push('/register')
}

onMounted(() => {
    // 如果从注册跳转到登录，该值为注册的登录名
    let loginName = router.currentRoute.value.query.loginName
    if (loginName) {
        formData.value.uname = loginName
    }
})
</script>

<style scoped>
.login-div {
    width: 100%;
    height: 100%;
    background-image: url(../views/depot/bgimg.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.login-bg {
    position: fixed;
    left: 50%;
    top: 16%;
    margin-left: -543px;
    height: 100%;
}

.login-hz {
    float: left;
    width: 100%;
    z-index: 99;
    height: 70%;
}

.login-title {
    margin-top: 70px;
    font-size: 36px;
    text-align: center;
    color: #666666;
}

.btn {
    width: 245px;
    height: 38px
}

a {
    margin-left: 155px;
    color: #2395FF;
    text-decoration: none
}

.bgimg {
    float: left;
    height: 100%;
}

.login-box {
    position: relative;
    width: 340px;
    height: 520px;
    background: #fff;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0 2px 6px 0 rgb(200 200 200);
    overflow: hidden;
}

.el-form {
    margin: 50px;
}
</style>
